// See RScrollTableView.htm for how to use RScrollTableView.
// After defining a table like the one in RScrollTableView.htm,
// one may create a RScrollableTable, who provides dynamic row adding/removing operations,
// and keep the column width the same for header table and content table
function RScrollTableView(tableId) {
	this.cntr = document.getElementById(tableId);
	this.headTable = this.cntr.tHead.rows[0].cells[0].children[0];
	this.sampleLine = this.headTable.tBodies[0].rows[0];
	this.lineTable = this.cntr.tBodies[0].rows[0].cells[0].children[0].children[0];
	this.body=this.lineTable.tBodies[0];
}
RScrollTableView.prototype={
	getRowCount: function() {
		return this.body.rows.length;
	},
	removeAllRows: function() {
		while(this.removeRow(1));
	},
	// rowNumber: 1-based
	removeRow: function(rowNumber) {
		if (this.getRowCount()>0) {
			this.body.deleteRow(rowNumber-1);
			this.adjustColumnWidth(this.headTable, this.lineTable);
			return true;
		} else return false;
	},
	getCellData: function(rowObject, name){
		for (var i = 0; i < rowObject.cells.length; ++i) {
			var cell = rowObject.cells[i];
			if (cell.rname == name) {
				return cell.innerText;
			}
		}
		return row[name];
	},
	// rowNumber: 1-based
	getRow: function(rowNumber){
		return this.body.rows[rowNumber-1];
	},
	addRow: function(count, beforeRowNumber) {
		var row;
		var beforeRow = null;
		if (isDefined(beforeRowNumber)) beforeRow = this.getRow(beforeRowNumber);
		if (!isDefined(beforeRow)) beforeRow = null;
		for (var i=0; i<count; ++i) {
			var elm = this.sampleLine;
			elm = elm.cloneNode(true);
			elm.style.display="";
			this.body.insertBefore(elm, beforeRow);
			if (i==0)row=elm;
		}
		return row;
	},
	setRowData: function(rowObject, data) {
		for (var name in data) this.setCellData(rowObject, name, data[name]);
		this.adjustColumnWidth(this.headTable, this.lineTable);
		return rowObject;
	},
	setCellData: function(rowObject, name, value) {
		// row:<TR>, name:rname in <TD>
		var done=false;
		for (var i = 0; i < rowObject.cells.length; ++i) {
			var cell = rowObject.cells[i];
			if (cell.rname == name) {
				cell.innerText = value;
				done=true;
				break;
			}
		}
		if (!done) rowObject[name]=value;
	},
	/////////////////////////////////////////////////////////////
	//  make same column width in header table and content table
	//	thead: header table object
	//	tline: line table object
	adjustColumnWidth: function(thead, tline) {
		if (this.getRowCount()==0) return;
		thead.width="";
		thead.cellPadding=tline.cellPadding;
		thead.border=tline.border;
		var lh = thead.rows[0];
		var lr = tline.rows[0];
		var pad = parseInt(tline.cellPadding)*2;
		if (isNaN(pad)) pad = 0;
		for (var i=0; i<lr.cells.length; ++i) {
			if (lh.cells[i].clientWidth <= lr.cells[i].clientWidth || tline.width=="100%")
				lh.cells[i].width=lr.cells[i].clientWidth-pad;
			else
				lr.cells[i].width=lh.cells[i].clientWidth-pad;
		}
	}
}

//////////////////////////////////////////////////////
// make a traditional table's content scrollable
// tid: table id
// height: the height of table
function makeContentScrollable(tid, height) {
	var tline = document.getElementById(tid);
	if (tline == null) alert("ID " + tid + " does not exist");
	
	// container table
	var cntr = document.createElement("table");
	cntr.border=0;
	cntr.cellSpacing=0;
	cntr.cellPadding=0;
	cntr.height=height;
	cntr.className="w n e s";
	tline.parentElement.insertBefore(cntr, tline);
	
	var tbody = document.createElement("tbody");
	cntr.insertBefore(tbody);
	
	// table header
	var trHead = document.createElement("tr");
	trHead.height="1%"
	tbody.insertBefore(trHead);
	
	var tdHead = document.createElement("td");
	tdHead.className="s";
	trHead.insertBefore(tdHead);
	
	var thead = document.createElement("table");
	thead.cellSpacing=0;
	tdHead.insertBefore(thead);
	
	var theadbody = document.createElement("tbody");
	thead.insertBefore(theadbody);
	
	// adjust border line
	for (var i=0; i<tline.rows[0].cells.length; ++i) {
		tline.rows[0].cells[i].style.borderLeft=0;
		tline.rows[0].cells[i].style.borderTop=0;
		tline.rows[0].cells[i].style.borderBottom=0;
	}
	theadbody.insertBefore(tline.rows[0]);
	
	// table lines
	var trLine = document.createElement("tr");
	trLine.heidht="100%";
	tbody.insertBefore(trLine);
	
	var tdLine = document.createElement("td");
	trLine.insertBefore(tdLine);
	
	var div = document.createElement("div");
	div.style.height="100%";
	div.style.overflowY="auto";
	tdLine.insertBefore(div);
	
	// adjust border line
	tline.style.border=0;
	for (var i=0; i<tline.rows.length; ++i) {
//		tline.rows[i].cells[0].style.borderLeft=0;
	}
	div.insertBefore(tline);
	
	// adjust column width
	adjustColumnWidth(thead, tline);
}
/////////////////////////////////////////////////////////////
//  make same column width in header table and content table
//	thead: header table object
//	tline: line table object
function adjustColumnWidth(thead, tline) {
	thead.cellPadding=tline.cellPadding;
	thead.border=tline.border;
	var lh = thead.rows[0];
	var lr = tline.rows[0];
	for (var i=0; i<lr.cells.length; ++i) {
		if (lh.cells[i].clientWidth <= lr.cells[i].clientWidth)
			lh.cells[i].width=lr.cells[i].clientWidth-tline.cellPadding*2;
		else
			lr.cells[i].width=lh.cells[i].clientWidth-tline.cellPadding*2;
	}
}
